<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>系统首页</title>
    <script src="/assets/jquery-v3.7.1/jquery.min.js"></script>

    <!-- 引入blueimp-file-upload的CSS -->
    <link rel="stylesheet" href="/assets/blueimp-file-upload-v10.32.0/css/jquery.fileupload.css">
    <link rel="stylesheet" href="/assets/blueimp-file-upload-v10.32.0/css/jquery.fileupload-ui.css">

    <!-- 引入blueimp-file-upload的JS -->
    <script src="/assets/blueimp-file-upload-v10.32.0/js/vendor/jquery.ui.widget.js"></script>
    <script src="/assets/blueimp-file-upload-v10.32.0/js/jquery.iframe-transport.js"></script>
    <script src="/assets/blueimp-file-upload-v10.32.0/js/jquery.fileupload.js"></script>
</head>
<body>
<h1>你好，<span>${user.nickname}</span>。欢迎来到后台管理系统！</h1>
<img id="avatar" src="/minio/download?fileName=${user.avatar!''}" alt="" width="200" height="200">
<label for="avatar">上传头像：</label>
<input id="file" type="file" name="file" multiple>
<div id="progress">
    <div class="bar" style="width: 0; height: 18px; background: green;"></div>
</div>

<script>
    console.log('欢迎来到后台管理系统！')

    var userid = '${user.id}';

    $(function () {
        $('#file').fileupload({
            url: '/minio/upload', // 你的服务器端上传URL
            dataType: 'json',
            add: function (e, data) {
                // console.log("add", e, data)
                $.each(data.files, function (index, file) {
                    data.context = $('<p/>').text('[ ' + file.name + ' ] Uploading...').appendTo(document.body);
                });
                data.submit(); // 上传
            },
            done: function (e, data) {
                // console.log("done", e, data)
                console.log("服务器返回结果", data.result)
                $.each(data.files, function (index, file) {
                    data.context.text('[ ' + file.name + ' ] Upload finished. Saved as: ' + data.result.data.storageName);
                    $.ajax({
                        type: "POST",
                        url: "/user/set/avatar",
                        contentType: 'application/json',
                        data: JSON.stringify({id: userid, avatar: data.result.data.storageName}),
                        dataType: "json",
                        success: function(o) {
                            console.log("服务器返回结果", o)
                            $('#avatar').attr('src', '/minio/download?fileName=' + data.result.data.storageName)
                            alert("设置头像成功")
                        }
                    });
                });
            },
            progressall: function (e, data) { // 进度条
                console.log("progressall", e, data)
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .bar').css('width', progress + '%');
            }
        });
    });
</script>
</body>
</html>
